<template> 
  <div class="app-container"> 
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="服务器标识ID" prop="equipmentid">
          <el-input v-model="form.equipmentid" disabled />
        </el-form-item>
        <el-form-item label="别称" prop="anothername">
          <el-input v-model="form.anothername" placeholder="请输入别称" />
        </el-form-item>
        <el-form-item label="Client ID" prop="clientId">
          <el-input v-model="form.clientId" placeholder="请输入Client ID" />
        </el-form-item>
        <el-form-item label="用户名" prop="loginname">
          <el-input v-model="form.loginname" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="passworld">
          <el-input v-model="form.passworld" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input v-model="form.description" placeholder="用户名+密码=订阅的主题" />
        </el-form-item>
        <el-form-item label="日期" prop="cratedate" >
          <el-date-picker clearable
            v-model="form.cratedate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择" disabled>
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" >
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div> 
  </div>
</template>

<script>
import { listEquipclient, getEquipclient, delEquipclient, addEquipclient, updateEquipclient } from "@/api/mqtt/equipclient";

export default {
  name: "Equipclient",
  props: ['equipID','equipclientID'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      equipclientList: [], 
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        equipmentid: [
          { required: true, message: "服务器设备标识ID不能为空", trigger: "blur" }
        ],
        clientId: [
          { required: true, message: "Client ID不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.initBase();
  },
  methods: {
 
    initBase() {
      // 加载数据  
      const equipId =this.equipID; 
      const id =this.equipclientID; 
      this.form.equipmentid=equipId; 
       this.form.cratedate=this.getCurrentDate()
    }, 
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id =this.equipclientID;  
      getEquipclient(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.form.id =this.equipclientID;  
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null&&this.form.id.length>0) {
            updateEquipclient(this.form).then(response => {
              this.$modal.msgSuccess("修改成功"); 
            });
          } else {
            addEquipclient(this.form).then(response => {
              this.$modal.msgSuccess("新增成功"); 
            });
          }
        }
      });
    },
     cancel(){
     },
      getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
      const day = String(now.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>
